<template>
  <div class="virtual_depot_track">
    <one-title title="虚拟出库跟踪" @refreshData="refresh">
      <div class="mes_btn">
        <el-button
          v-btn-permission="'requestAgain'"
          @click="requestAgain">
          <i class="iconfont icon-btn_issued"></i>
          重新发起请求
        </el-button>
      </div>
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          border
          stripe
          ref="mesTable"
          v-loading="isLoading"
          element-loading-text="数据加载中"
          style="width: 100%"
          :data="listData.list"
          :max-height="tableMaxHeight"
          @sort-change="_sort">
          <el-table-column
            label="出库信息">
            <mes-col-comp :key="index + 1"
                          v-for="(column, index) in tableColConfig.information1"
                          :column="column">
            </mes-col-comp>
          </el-table-column>
          <el-table-column
            prop="name"
            label="使用批次信息"
            width="120">
            <mes-col-comp :key="index + 2"
                          v-for="(column, index) in tableColConfig.information2"
                          :column="column">
            </mes-col-comp>
          </el-table-column>
          <el-table-column
            prop="name"
            label="虚拟出库-物料信息"
            width="120">
            <mes-col-comp :key="index + 3"
                          v-for="(column, index) in tableColConfig.information3"
                          :column="column">
            </mes-col-comp>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
    </div>
  </div>
</template>

<script>
import tableColumns from './tableConfig'

export default {
  name: 'VirtualDepotTrack',
  data() {
    return {
      tableColConfig: tableColumns, // 列配置
      isLoading: false, // 加载状态
      searchData: {}, // 搜索对象
      sortData: {}, // 排序对象
      selectData: [], // 选择列表
      searchResult: NaN, // 搜索结果数
    }
  },
  computed: {
    listData() {
      return this.$store.state.virtualDepotTrack.listData || {}
    },
    searchList() {
      let arr = []
      arr = tableColumns.information1.concat(tableColumns.information2).concat(tableColumns.information3)
      return arr
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15,
      }
      let postData = {
        method: 'post',
        url: 'a/virtualmaterialrequest/virtualMaterialRequest/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
          query: this.searchData,
          sort: this.sortData,
        },
        module: 'virtualDepotTrack',
        state: 'listData'
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 搜索
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 重新发起请求
    requestAgain() {
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/virtualmaterialrequest/virtualMaterialRequest/allrequestagain',
        noCommit: true
      }).then(() => {
        this.tipMessage('success', '发起成功')
        this.init()
      }).finally(() => {
        this.isLoading = false
      })
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style scoped>

</style>
